<template>
  <a-drawer 
    title="库位详情"
    wrapClassName="weiben-private-drawer"
    :width="400"
    :closable="false"
    :maskClosable="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="loading">
      <div class="zz-inverting-storages-detail-div">
        <div class="location-detail-box">
          <div class="base-info info-box">
            <p>库位编号：{{locationObj.placecode}}</p>
            <p>托盘编号：{{containercode}}</p>
          </div>
          <!-- 物料列表 start -->
          <div class="location-materials">
            
            <div class="location-material-item" v-for="(item,index) in materialList" :key="'material-item-'+index">
              <a-card>
                <div class="info-box">
                  <p>物料编号：{{item.materialNo}}</p>
                  <p>物料名称：{{item.materialName}}</p>
                  <p>尺寸：{{item.materialSpec}}</p>
                  <p>船号：{{item.shipNo}}</p>
                  <p>图号：{{item.drawingNo}}</p>
                </div>
              </a-card>
            </div>
            
          </div>
          <!-- 物料列表 end -->
        </div>
      </div>
    </a-spin>
  </a-drawer>
</template>

<script>
import { GetLocationDetail } from '@/api/modular/main/InvertingStorageManage'
export default {
  name:'zzInvertingStorageDetailDrawer',
  emits:['update:visible','callback'],
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    row:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data(){
    return {
      loading:false,
      locationObj:{
        placestatus:null,
        islock:null
      },
      containercode:'',
      materialList:[],
      actionFlag:false
    }
  },
  methods:{
    onClose(){
      this.close()
    },
    close(){
      this.$emit('update:visible',false)
    },
    afterVisibleChange(visible){
      if (visible) {
        this.initShow()
      } else {
        this.afterClsoe()
      }
    },
    initShow(){
      this.loading = true;
      this.getLocationDetail(()=>{
        this.loading = false;
      })
    },
    getLocationDetail(callback){
      let params = {Placecode:this.row.placecode}
      GetLocationDetail(params).then((d)=>{
        this.locationObj = d.data.palceDetails || {}
        this.containercode = d.data.containercode || ''
        this.materialList = d.data.wmsMaterialStocks || []
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    afterClsoe(){
      this.locationObj = {
        placestatus:null,
        islock:null
      }
      this.containercode = ''
      this.materialList = []
      if (this.actionFlag) {
        this.$emit('callback')
      }
      this.actionFlag = false
    }
  }
}
</script>

<style lang="less" scoped>
.zz-inverting-storages-detail-div{
  height:100%;
  display: flex;
  flex-direction: column;
  &>.btns-row{
    flex-shrink: 0;
    padding:12px 16px;
    .ant-btn + .ant-btn {
      margin-left: 10px;
    }
  }
  .location-detail-box{
    flex-grow: 1;
    overflow: auto;
  }
  .info-box{
    line-height: 1.5;
    p{
      margin-bottom: 0;
    }
  }
  .base-info,.location-materials{
    padding:0 16px;
    margin-bottom: 16px;
  }
  .location-materials{
    .location-material-item{
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>